<template>
  <el-row type="flex">
    <el-input size="mini" :value="valueVariable" style="width: 100px" disabled placeholder="比较值" />
    <el-button size="mini" style="margin-left: 5px" @click="showDialog = true">...</el-button>
    <el-dialog title="值" :visible="showDialog" @close="btnCancel">
      <el-tabs v-model="valueType">
        <el-tab-pane label="字符串" name="string">
          <el-form label-width="120px">
            <el-form-item label="字符串">
              <el-input v-model="stringValue" style="width: 30%" placeholder="请输入字符串" @change="changeValue" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="整数" name="number">
          <el-form label-width="120px">
            <el-form-item label="整数">
              <el-input-number v-model="numberValue" placeholder="请输入整数值" @change="changeValue" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="小数" name="decimal">
          <el-form label-width="120px">
            <el-form-item label="小数">
              <el-input v-model="decimalValue" style="width: 30%" placeholder="请输入小数值" type="number" @change="changeValue" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="静态变量" name="variable">
          <!-- 静态变量 -->
          <!-- <el-select> -->
          <!-- 静态变量 -->
          <!-- </el-select> -->
        </el-tab-pane>
      </el-tabs>
      <!-- 弹层 -->
      <el-row slot="footer" type="center" justify="center">
        <!-- 居中 -->
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-row>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  props: {
    updateIndex: {
      default: -1,
      type: Number
    },
    valueVariable: {
      default: null
    }
  },
  data() {
    return {
      valueType: 'string',
      showDialog: false,
      stringValue: null, // 字符串变量
      decimalValue: null, // 小数变量
      numberValue: null, // 整数变量
      value: null
    }
  },
  methods: {
    btnOK() {
      if (!this.value) {
        this.$message.warning('必须输入一个可用的值')
        return
      }
      this.$emit('updateValue', this.value, this.updateIndex)
      this.btnCancel()
    },
    btnCancel() {
      this.showDialog = false
      this.stringValue = null
      this.decimalValue = null
      this.numberValue = null
      this.valueType = 'string'
    },
    // 值改变事件
    changeValue(value) {
      if (this.valueType === 'string') {
        this.value = value.toString()
      } else if (this.valueType === 'number') {
        this.value = parseInt(value)
      } else if (this.valueType === 'decimal') {
        this.value = parseFloat(value)
      }
      this.value = value
    }
  }
}
</script>

<style>

</style>
